<template>
  <div class="wrap">
    <div class="wrapper">
      <Top :projectId="baojing"></Top>

      <div class="shu-moluai1">
        <div class="zuti">区所选择:</div>
        <el-select
          v-model="value"
          placeholder="请选择"
          @change="qiehuan(value)"
        >
          <el-option
            v-for="item in options"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
        <div class="main-dianli-bottomgg" id="style-1">
          <!-- <div class="mainbg-tit">组态图</div> -->
          <!-- 一组结束 -->
          <div class="network_show" v-if="valTrue">
            <!-- <div class="titzutai">冠县配电所电力测温系统图</div> -->
            <iframe
              class="network_shownei"
              name="content_frame"
              src="http://39.98.122.153:8070/runview.html?filename=hanji"
              frameborder="0"
              scrolling="no"
            ></iframe>
          </div>
          <div class="network_show" v-else>
            <!-- <div class="titzutai">冠县配电所电力测温系统图</div> -->
            <iframe
              class="network_shownei"
              name="content_frame"
              src="http://39.98.122.153:8070/runview.html?filename=newguanzhou"
              frameborder="0"
              scrolling="no"
            ></iframe>
          </div>
          <!-- 右边模块一 -->
        </div>

        <!-- 右边结束 -->
      </div>
    </div>
  </div>
</template>
<script>
import Top from "../../components/common/top.vue";
export default {
  components: { Top },
  data() {
    return {
      baojing: 0, //不想
      departList: [{ name: "第一配电室" }, { name: "第二配电室" }],
      warnEquipList: [{ equip_nick_name: "设备", level: "warning" }],
      equipList: [
        { equip_nick_name: "第一个" },
        { equip_nick_name: "第二个" },
        { equip_nick_name: "第二个" },
        { equip_nick_name: "第二个" }
      ],
      options: [
        {
          value: "选项1",
          label: "冠县配电所"
        },
        {
          value: "选项2",
          label: "聊城东配电所"
        }
      ],
      value: "",
      valTrue: true,
      valTrue2: false
    };
  },
  beforeDestroy() {
    clearInterval(this.tm2);
  },
  created() {
    this.getseletop();
  },
  mounted() {
    this.warningfun();
    this.tm2 = setInterval(() => {
      this.warningfun();
    }, 30000);
  },
  methods: {
    getseletop() {
      this.$apiv.setsectlt({}).then(res => {
        console.log(res, "选择框");
        this.options = res.data;
        this.value = res.data[0].name;
        console.log(this.value);
        if (this.value == "聊城东") {
          this.valTrue = false;
        } else {
          this.valTrue = true;
        }
      });
    },
    qiehuan(value) {
      console.log(value);
      if (value == "聊城东") {
        this.valTrue = false;
      } else {
        this.valTrue = true;
      }
    },
    warningfun() {
      this.loginLoading = true;
      this.$apiv
        .warning({})
        .then(res => {
          console.log("ggg", res.data);
          if (res.data.is_ok == true) {
            this.baojing = 1;
          } else {
            this.baojing = 0;
          }
          this.loginLoading = false;
        })
        .catch(res => {
          this.loginLoading = false;
        });
    }
  }
};
</script>

<style scoped>
@import url("../../../static/zhuti.css");
.con-dianvv table,
td,
th {
  border: 1px solid #055288;
  text-align: center;
  color: #ffffff;
  height: 42px;
  font-size: 14px;
}
/deep/ .el-input__inner {
  background-color: rgb(0, 20, 66);
  color: #fff;
  margin-left: 10px;
}
.con-dianvv table {
  border-collapse: collapse;
  width: 100%;
}
.con-dianvv table th {
  font-weight: bold;
}
.network_show {
  width: 100%;
  height: 100%;
}
.titzutai {
  text-align: center;
  font-size: 24px;
  color: #00ccff;
  height: 30px;
}
.network_shownei {
  width: 100%;
  height: 100%;
}
</style>
